<template>
  <div class="card">
    <div>
      <a-input v-model="form.user_phone" class="inputStyle" placeholder="用户手机"></a-input>
      <a-input v-model="form.user_realname" class="inputStyle" placeholder="用户姓名"></a-input>
      <a-select v-model="form.sms_send_result" :allowClear="true" placeholder="请选择短信状态" class="inputStyle">
        <a-select-option v-for="item in sendStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="form.is_plan" :allowClear="true" placeholder="请选择制定计划" class="inputStyle">
        <a-select-option v-for="item in planStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="form.is_notice" :allowClear="true" placeholder="请选择是否通知" class="inputStyle">
        <a-select-option v-for="item in noticeStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </div>
    <div style="margin: 10px 0">
      <a-select v-model="form.handle_status" :allowClear="true" placeholder="请选择处理状态" class="inputStyle">
        <a-select-option v-for="item in handleStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="form.plan_status" :allowClear="true" placeholder="请选择计划状态" class="inputStyle">
        <a-select-option v-for="item in playType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="form.channel_id" :allowClear="true" placeholder="计划通道" class="inputStyle">
        <a-select-option v-for="item in channelType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-input v-model="form.bank_name" class="inputStyle" :allowClear="true" placeholder="银行名称"></a-input>
      <a-select v-model="form.is_send_sms" :allowClear="true" placeholder="是否发送短信" class="inputStyle">
        <a-select-option v-for="item in isSendType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </div>
    <div>
      <a-select v-model="form.all_brand" :allowClear="true" placeholder="是否全部品牌" class="inputStyle">
        <a-select-option v-for="item in IsAll" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button class="btnStyle" type="primary" @click="sendMessage">短信群发</a-button>
      <a-button class="btnStyle" type="primary" @click="batchSend">短信群发(上次)</a-button>
      <a-button class="btnStyle" type="primary" @click="editBatch()">批量修改</a-button>
      <a-button class="btnStyle" type="danger" @click="cancelBatch()">批量取消</a-button>
      <a-button class="btnStyle" type="primary" @click="start">批量启动</a-button>
      <a-button class="btnStyle" type="primary" @click="getInfoList">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: form.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: form.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="border: 1px solid #e8e8e8; margin-top: 10px"
      show-size-changer
      show-quick-jumper
      :row-selection="rowSelection"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="channel_name" slot-scope="text, record">
        <span :style="`color:${record.channel_color == 1 ? '#e70606' : ''};`" @dblclick="dbclickContent">{{
          record.channel_name
        }}</span>
      </div>
      <div slot="type" slot-scope="text, record">
        <span v-if="record.type === 0">无</span>
        <span v-if="record.type === 1">中介</span>
        <span v-if="record.type === 2">托管</span>
      </div>
      <div slot="status" slot-scope="text, record">
        <span @click="viewDetail(record.id)" :style="`color:${record.status_color};`" class="linkStyle">
          {{ record.status_text }}
        </span>
      </div>
      <div slot="handle_msg" slot-scope="text, record">
        <a-input
          style="width: 130px"
          @blur="handleBlur(record.handle_msg, record.id)"
          placeholder="请输入处理意见"
          v-model="record.handle_msg"
        ></a-input>
      </div>
      <div slot="inform" slot-scope="text, record">
        <a-select @change="notice(record.id, record.is_notice)" v-model="record.is_notice" style="width: 60px">
          <a-select-option
            v-for="item in [
              { id: 0, name: '否' },
              { id: 1, name: '是' }
            ]"
            :key="item.id"
            :value="item.id"
            >{{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div slot="dispose" slot-scope="text, record">
        <a-select
          @change="handlerChange(record.id, record.handle_status)"
          v-model="record.handle_status"
          style="width: 60px"
        >
          <a-select-option
            v-for="item in [
              { id: 1, name: '是' },
              { id: 0, name: '否' }
            ]"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
    </a-table>
    <a-modal v-model="isShowEdit" width="30%" title="批量修改" @ok="handleOk" @cancel="onCancel">
      <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
        <a-form-model-item label="处理状态">
          <a-select v-model="editForm.status" style="width: 100%">
            <a-select-option
              v-for="item in [
                { id: '-1', name: '不修改' },
                { id: '0', name: '未处理' },
                { id: '10', name: '已处理' }
              ]"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="通知状态">
          <a-select v-model="editForm.is_notice" style="width: 100%">
            <a-select-option
              v-for="item in [
                { id: '-1', name: '不修改' },
                { id: '0', name: '未通知' },
                { id: '1', name: '已通知' }
              ]"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="标记通道颜色">
          <a-select v-model="editForm.channel_color" style="width: 100%">
            <a-select-option
              v-for="item in [
                { id: '-1', name: '不修改' },
                { id: '1', name: '红色' },
                { id: '0', name: '正常' }
              ]"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="处理意见">
          <a-textarea v-model="editForm.handle_msg" placeholder="请输入处理意见" :rows="4" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="isShowCancel" width="30%" title="批量取消" @ok="cancelOk" @cancel="cancelCancel">
      <div class="cancelStyle">
        <span>处理意见：</span>
        <a-textarea v-model="cancelValue" placeholder="请输入处理意见" :rows="4" />
      </div>
    </a-modal>
    <SendMessage :isShowSendMessage.sync="isShowSendMessage" :ids.sync="ids" />
  </div>
</template>

<script>
import SendMessage from './SendMessage.vue'
import { getBankListAPI } from '@/api/userinfo.js'
import {
  getPlanAPI,
  getInfoListAPI,
  uploadMsgAPI,
  handlerAPI,
  startAPI,
  signAPI,
  batchSendMessageAPI
} from '@/api/transaction.js'
export default {
  components: {
    SendMessage
  },
  name: 'Repaymentdailyprocess',
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      ids: [],
      isShowSendMessage: false,
      cancelValue: '',
      isShowEdit: false,
      isShowCancel: false,
      editForm: {
        status: '-1', //  处理状态
        is_notice: '-1', //  通知状态
        channel_color: '-1', //  标记通道颜色
        handle_msg: '' //  处理意见
      },
      selectedRowKeys: [],
      select_rows: [],
      loading: false,
      total: 0,
      form: {
        page: 1,
        page_size: 50,
        search: {
          handle_status: '', // 处理状态
          bank_name: '', // 银行名称
          is_send_sms: '', // 是否发送短信
          brand_id: process.env.VUE_APP_BRAND_ID,
          sms_send_result: '', // 短信状态
          is_plan: '', // 制定计划
          plan_status: '', // 计划状态
          channel_id: '', // 计划通道
          user_phone: '',
          user_realname: '',
          all_brand: '', // 是否全部品牌
          is_notice: '' // 是否通知
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '真实姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '电话',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '类型',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center'
        },
        {
          title: '未还金额',
          dataIndex: 'waiting_repayment_amount',
          align: 'center'
        },
        {
          title: '通道名称',
          align: 'center',
          scopedSlots: { customRender: 'channel_name' }
        },
        {
          title: '订单状态',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '备注',
          dataIndex: 'info',
          align: 'center'
        },
        {
          title: '处理时间',
          dataIndex: 'handle_timestamp',
          align: 'center'
        },
        {
          title: '处理意见',
          align: 'center',
          scopedSlots: { customRender: 'handle_msg' }
        },
        {
          title: '通知时间',
          dataIndex: 'notice_timestamp',
          align: 'center'
        },
        {
          title: '通知',
          align: 'center',
          scopedSlots: { customRender: 'inform' }
        },
        {
          title: '处理',
          align: 'center',
          scopedSlots: { customRender: 'dispose' }
        },
        {
          title: '短信',
          dataIndex: 'is_send_sms_txt',
          align: 'is_send_sms_txt'
        }
      ],
      tableData: [],
      sendStatus: [
        { id: '1', name: '失败' },
        { id: '2', name: '非失败' }
      ],
      planStatus: [
        { id: '1', name: '是' },
        { id: '2', name: '否' }
      ],
      noticeStatus: [
        { id: '1', name: '否' },
        { id: '2', name: '是' }
      ],
      handleStatus: [
        { id: '0', name: '全部订单' },
        { id: '1', name: '今日未处理' },
        { id: '2', name: '昨日未处理' },
        { id: '3', name: '已处理' }
      ],
      playType: [
        { id: '15', name: '异常进行中' },
        { id: '-30', name: '还款失败' },
        { id: '20', name: '部分完成' },
        { id: '-20', name: '部分取消' },
        { id: '-10', name: '取消' }
      ],
      isSendType: [
        { id: '1', name: '否' },
        { id: '2', name: '是' }
      ],
      IsAll: [{ id: '1', name: '全部品牌' }],
      bankType: [],
      channelType: []
    }
  },
  created() {
    this.getType()
    this.getInfoList()
  },
  methods: {
    batchSend() {
      if (this.select_rows.length < 1) return this.$message.error('请选择会员信息')
      const ids = this.select_rows.map(item => item.id)
      this.$confirm({
        title: '确定群发上次短信吗?',
        onOk: async () => {
          await batchSendMessageAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids })
          this.getInfoList()
          this.$message.success('操作成功')
        },
        onCancel() {
          return
        }
      })
    },
    sendMessage() {
      if (this.select_rows.length < 1) return this.$message.error('请选择会员信息')
      this.ids = this.select_rows.map(item => item.id)
      this.isShowSendMessage = true
    },
    viewDetail(id) {
      console.log(this.cidPlan)
      this.$router.push({ path: 'plandetails', query: { id } })
    },
    reset() {
      this.form = {
        page: 1,
        page_size: 50,
        search: {
          handle_status: '', // 处理状态
          bank_name: '', // 银行名称
          is_send_sms: '', // 是否发送短信
          brand_id: process.env.VUE_APP_BRAND_ID,
          sms_send_result: '', // 短信状态
          is_plan: '', // 制定计划
          plan_status: '', // 计划状态
          channel_id: '', // 计划通道
          user_phone: '',
          user_realname: '',
          all_brand: '', // 是否全部品牌
          is_notice: '' // 是否通知
        }
      }
      this.getInfoList()
    },
    async getType() {
      const { data } = await getBankListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { from: 'repayment' } })
      this.bankType = data
      const result = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: '1' } })
      this.channelType = result.data
    },
    async getInfoList() {
      try {
        this.loading = true
        const { data } = await getInfoListAPI(this.form)
        console.log(data)

        this.tableData = data.list
        this.total = data.total
      } finally {
        this.loading = false
      }
    },

    paginChange(value) {
      console.log(value)
      this.form.page = value.current
      this.form.page_size = value.pageSize
      this.getInfoList()
    },
    playFilters(value) {
      return this.playType.find(item => item.id == value)?.name
    },
    async handleBlur(content, id) {
      try {
        const result = await uploadMsgAPI({
          brand_id: process.env.VUE_APP_BRAND_ID,
          plan_id: id,
          type: 'handle-msg',
          value: content
        })
        this.getInfoList()
        this.$message.success(result.msg)
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    async handlerChange(id, value) {
      try {
        const result = await handlerAPI({ brand_id: process.env.VUE_APP_BRAND_ID, plan_id: id, type: 'handle', value })
        this.$message.success(result.msg)
        this.getInfoList()
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    async notice(id, value) {
      try {
        const result = await handlerAPI({ brand_id: process.env.VUE_APP_BRAND_ID, plan_id: id, type: 'notice', value })
        this.$message.success(result.msg)
        this.getInfoList()
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    async dbclickContent() {
      try {
        const result = await signAPI({ brand_id: process.env.VUE_APP_BRAND_ID, id: 78152, info: 1, type: 1 })
        this.$message.success(result.msg)
        this.getInfoList()
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    async start() {
      if (this.select_rows.length < 1) return this.$message.error('至少选择一个计划')
      try {
        await startAPI({ brand_id: process.env.VUE_APP_BRAND_ID, plan_id: this.select_rows.map(item => item.id) })
        this.getInfoList()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    editBatch() {
      if (this.select_rows.length < 1) return this.$message.error('至少选择一个计划')
      this.isShowEdit = true
    },
    cancelBatch() {
      if (this.select_rows.length < 1) return this.$message.error('至少选择一个计划')
      this.isShowCancel = true
    },
    handleOk() {
      this.isShowEdit = false
    },
    onCancel() {
      this.isShowEdit = false
    },

    cancelOk() {
      if (!this.cancelValue) return this.$message.error('请输入处理意见')
      this.isShowCancel = false
    },
    cancelCancel() {
      this.isShowCancel = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 10px 0;
}
/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
.btnStyle {
  margin-right: 10px;
}
.cancelStyle {
  span {
    white-space: nowrap;
  }
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
